<template>
  <div class="flexBetween" style="height:100%">
    <div class="topPart1">
      <div class="topPartTitle">
        <img src="@/assets/img/todayAttendance.png" alt style="transform: translateY(-0.1rem);" />

        <span style="margin-left:1rem">在场劳务人员</span>
      </div>
      <div style="text-align:center">
        <span style="font-size:5.8rem">{{this.$store.state.dataCenterAttendance.laborTotal}}</span>
        <span>人</span>
      </div>
    </div>
    <div class="topPart2">
      <div class="topPartTitle">
        <img src="@/assets/img/todayAttendance.png" alt style="transform: translateY(-0.1rem);"/>
        <div style="margin-left:1rem">今日出勤人数</div>
      </div>
      <div style="text-align:center">
        <span style="font-size:5.8rem">{{this.$store.state.dataCenterAttendance.attendanceTotal}}</span>
        <span>人</span>
      </div>
    </div>
    <div class="topPart3">
      <div class="topPartTitle">
        <img src="@/assets/img/lastMonthAttendance.png" alt />
        <div style="margin-left:1rem">上月人均出勤天数</div>
      </div>
      <div style="text-align:center">
        <span style="font-size:5.8rem">{{this.$store.state.dataCenterAttendance.lastMonthAttendanceAverageDays}}</span>
        <span>天</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
      attendanceNum: []
    }
  },
  
}
</script>

<style scoped>
.topPart1,
.topPart2,
.topPart3 {
  width: 30%;
  color: #fff;
  font-size: 1.6rem;
  height: 100%;
}
.topPart1 {
  background: linear-gradient(-45deg, #8108ed 0%, #bc75fb 100%);
}
.topPart2 {
  background: linear-gradient(-18deg, #0e30aa 0%, #4368ef 100%);
}
.topPart3 {
  background: linear-gradient(-18deg, #b23206 0%, #fb9775 100%);
}
.topPartTitle {
  font-size: 2.2rem;
  margin: 3rem 0 0 2.2rem;
  margin-bottom: 2%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>